<template>
  <div>
    <div class="overAll add_page">
      <div style="width:100%;background-color:white;">
        <a-form-model ref="roleForm" class="ant-advanced-search-form" :rules="rules" :model="form">
          <a-card
            class="card_top"
            id="message_2"
            :title="$route.query.mode==='edit'?'编辑角色':($route.query.mode==='view'?'查看角色':'添加角色')"
          >
            <a-row>
              <a-col :span="2"></a-col>
              <a-col :span="10">
                <a-form-model-item label="角色名称" prop="name">
                  <a-input
                    v-model="form.name"
                    :disabled="$route.query.mode==='view'"
                    placeholder="请输入用户名"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="2"></a-col>
              <a-col :span="10">
                <a-form-model-item label="角色描述" prop="remark">
                  <a-textarea
                    v-model="form.remark"
                    :disabled="$route.query.mode==='view'"
                    rows="4"
                    placeholder="请填写角色描述"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="2"></a-col>
              <a-col :span="10">
                <a-form-model-item label="分配权限" prop="menuIdList">
                  <a-tree
                    style="margin-left:150px;"
                    :disabled="$route.query.mode==='view'"
                    v-model="form.menuIdList"
                    checkable
                    :tree-data="treeData"
                    :replace-fields="{ title: 'value',key:'key',children:'children' }"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row style="margin-top:50px;">
              <a-col :span="10"></a-col>
              <a-col :span="8">
                <a-form-model-item>
                  <a-button @click="onClose">关闭</a-button>
                  <a-button
                    style="margin-left:50px;"
                    type="primary"
                    @click="newRole"
                    v-if="$route.query.mode!='view'"
                    v-preventReClick
                  >确定</a-button>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-card>
        </a-form-model>
      </div>
    </div>
  </div>
</template>
<script>
import { getMenuTree, createRole, getRoles, updateRole } from '@/api/authority/role'

// const datas = {
//   OPERATE_DATA: '运营数据',
//   OPERATE_ADMIN_DATA: '运营主管数据',
//   OPERATE_DIRECTOR_DATA: '运营总监数据',
//   DESIGN_DATA: '设计数据',
//   DESIGN_ADMIN_DATA: '设计主管数据',
//   SALE_DATA: '销售专员数据',
//   SALE_ADMIN_DATA: '销售主管数据',
//   SALE_DIRECTOR_DATA: '销售总监数据'
// }
export default {
  data () {
    return {
      rules: {
        name: [{ required: true, message: '请输入用户名!', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入角色描述!', trigger: 'blur' }],
        menuIdList: [
          {
            type: 'array',
            required: true,
            message: '请分配权限',
            trigger: 'change'
          }
        ]
      },
      treeData: [],
      form: {
        remark: '',
        name: '',
        menuIdList: []
      }
    }
  },
  created () {
    getMenuTree().then((res) => {
      if (res.success) {
        this.treeData = res.vo && res.vo.children
        if (this.$route.query.id) {
          getRoles({ id: this.$route.query.id }).then((res) => {
            if (res.success) {
              res.vo.menuIdList.sort((a, b) => a - b)
              this.form = res.vo
              this.$forceUpdate()
            }
          }).catch(() => {})
        } else {
        }
      } else {
      }
    }).catch(() => {
    })
  },
  methods: {
    onClose () {
      this.$router.push({
        path: '/authority/role'
      })
    },
    onCheck (checkedKeys) {
      this.form.menuIdList = checkedKeys
    },
    newRole (e) {
      this.$refs.roleForm.validate((valid, failedVerificationItem) => {
        if (valid) {
          // 新增角色
          if (this.$route.query.mode === 'new') {
            createRole(this.form)
              .then((res) => {
                if (res.success) {
                  this.$router.push('/authority/role')
                }
              })
              .catch((err) => {
                console.log(new Error(err))
              })
          } else if (this.$route.query.mode === 'edit') {
            // 更新角色
            updateRole(this.form)
              .then((res) => {
                if (res.success) {
                  this.$router.push('/authority/role')
                }
              })
              .catch((err) => {
                console.log(new Error(err))
              })
          }
        } else {
          this.errorNotificationMethod(failedVerificationItem)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.gray {
  width: 100%;
  height: 20px;
  background-color: #f0f2f5;
}

.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.overAll {
  width: 100%;
  margin-bottom: 50px;
  position: relative;
}

.tabs_head {
  padding: 10px;
}

.overAll p {
  font-weight: 700;
}

.add_page .details_page p {
  font-weight: 500 !important;
}

.add_page .details_page p span {
  font-weight: 700;
}

.next_center button {
  color: white;
  background-color: #1890ff;
  border: none;
  border-radius: 7px;
  padding: 0px 20px;
}

.anchor {
  width: 10%;
  position: absolute;
  right: 0;
  top: 200px;
}

.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  width: 20px;
  transition: all 0.3s;
}

.dynamic-delete-button:hover {
  color: #777;
}

.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.footer_shop {
  width: 100%;
  height: 60px;
  background-color: white !important;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
}

.footer_shop button {
  margin-right: 20px;
}

.footer_shop ul {
  list-style: none;
  margin-top: 15px;
}

.footer_shop li {
  float: right;
}

.customStyle {
  background: #fafafa;
  border-radius: 4px;
  margin-bottom: 24px;
  border: 0;
  overflow: hidden;
}

.anticon svg {
  width: 15px !important;
  display: inline-block;
  margin-left: 10px;
}
</style>
